<!-- 作品详情-->
<template>
	<div class="works-panel">
		<nav-bar :back="1" :title="title" :isShowCollect="true" :isCollect="true" :isShowShare="true"></nav-bar>
		<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
			<div class="collect">
					<div class="collect-item">
						<div :class="'article-info ' + 'article-info-article'" @click="goProblemDetail(articleInfo.Id)">
							<div class="article-title limit-one-line">
								{{articleInfo.Title}}
							</div>
							<div class="article-synopsis limit-two-line">
								发布时间：{{articleInfo.AddTime}}
							</div>
							<div class="article-synopsis limit-two-line line-margin">
								{{articleInfo.Remark}}
							</div>
							<div class="article-synopsis limit-two-line line-margin">
								<div v-if="articleInfo.AttaList && articleInfo.AttaList.length>0">
									<audio ref="audio" :src="articleInfo.AttaList[0].AttaUrl" controls="controls" v-if="articleInfo.AttaList[0].AttaType =='2'"></audio>
									<video-player
										v-if="articleInfo.AttaList && articleInfo.AttaList[0].AttaType =='1'"
										class="video-player vjs-custom-skin"
										ref="videoPlayer"
										name="videoPlayer"
										id="video"
										:playsinline="true"
										:globalOptions="globalSetting"
										:options="playerOptions"
										>
									</video-player>
									<div v-if="articleInfo.AttaList && articleInfo.AttaList[0].AttaType =='0'" class="article-accessory article-accessory-look" @click="window.open(articleInfo.AttaList[0].AttaUrl)">
										<div class="article-type">
											<van-image width="100%" height="100%" :src="accessoryImgs[articleInfo.AttaList[0].AttaType]">
											</van-image>
										</div>
										<div class="article-attribute-box">
											<div class="article-name limit-one-line">	{{articleInfo.AttaList[0].AttaName}}</div>
											<div class="article-attribute limit-one-line">
												格式：{{articleInfo.AttaList[0].AttaName.split('.')[1]}} &nbsp; 上传时间：{{articleInfo.AddTime.substr(0,10)}}
											</div>
										</div>
										<div class="article-look">查看详情</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import { videoPlayer } from "vue-video-player";
	import "video.js/dist/video-js.css";
	import "vue-video-player/src/custom-theme.css";
	import NavBar from '../../components/NavBar.vue';
	import {
		learn_api
	} from '../../api/index.js'
	export default {
		name: 'article-ranking',
		components: {
			NavBar
		},
		data() {
			return {
				isLoading: false,
				title: '作品详情',
				id:'',
				articleInfo: {},
				globalSetting:{controls:true},
				playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          controls: true, //控制条
          preload: 'auto', //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'video/mp4',
            src: ''//你所放置的视频的地址，最好是放在服务器上
          }],
          poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        },
				accessoryImgs: [
					require('../../assets/imgs/accessory-file.png'),
					require('../../assets/imgs/accessory-video.png'),
					require('../../assets/imgs/accessory-audio.png'),
					require('../../assets/imgs/accessory-link.png'),
				],
			}
		},
		mounted(){
			this.id = this.$route.query.id;
			console.info(this.$route.query.id)
		},
		activated() {
			this.onRefresh();
		},
		methods: {
			onRefresh() {
				learn_api.getStudyworksInfo({Id: this.id}, (res) => {
					console.log('res', res)
					this.articleInfo = res;
					this.playerOptions.sources[0].src = this.articleInfo.AttaList[0].AttaUrl;
				})
			}
		}
	}
</script>

<style scoped>
	.works-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.works {
		min-height: calc(100vh - 0.88rem);
	}
	.collect-panel {
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.collect {
		min-height: calc(100vh - 0.88rem);
		padding-top: 0.1rem;
	}

	.collect-item {
		background-color: #FFFFFF;
		margin: 0 0 0.1rem;
		padding-top: 0.36rem;
	}

	.collect-info {
		padding: 0 0.2rem;
		height: 0.76rem;
	}

	.author-headpic {
		width: 0.76rem;
		height: 0.76rem;
		margin: 0 auto;
	}

	.author-name {
		padding-left: 0.2rem;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 0.4rem;
	}

	.collect-time {
		padding-left: 0.2rem;
		height: 0.38rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8D8D8D;
		line-height: 0.38rem;
	}

	.article-info {
		padding: 0.2rem 0.28rem 0.2rem;
		text-align: left;
	}
	
	.article-info-article{
		padding-bottom: 0.3rem;
	}

	.article-title {
		height: 0.7rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.7rem;
	}

	.article-synopsis {
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
	}

	.article-accessory {
		width: 6.4rem;
		height: 1.12rem;
		margin-top: 0.2rem;
		background: #F8F8F8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
		
	.article-accessory-look{
		width: 6.96rem;
	}

	.article-type {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0.6rem;
		min-height: 0.6rem;
		margin-left: 0.24rem;
	}
	
	.article-attribute-box{
		width: 60%;
		margin-left: 0.2rem;
	}
	.article-name{
		height: 0.56rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.56rem;
	}
	.article-attribute{
		height: 0.28rem;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		line-height: 0.28rem;
	}
	.article-look{
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE4B4B;
		line-height: 0.4rem;
		margin: 0 auto;
	}
	.money{
		color: #8A8A8A;
		background-color: #EDEDED;
		text-align: center;
		font-size: 0.25rem;
		height: 0.38rem;
		line-height: 0.38rem;
	}
	.goContribute {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		margin-bottom: 0.4rem;
	}
	.btn{
		width:2.9rem !important;
	}
	.prem-btn{
		color: #FE4B4B;
		background-color: #fff;
		border-radius: 0.1rem;
		border: 1px solid #FE4B4B;
	}
	.line-margin{
		margin-top:0.3rem;
	}
</style>
